<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-wallet animate__animated animate__fadeIn">
			<Header tit="VOICEPRINT" :title="t('lock.title')"></Header>
			<view class="info">
				<image class="icon" src="/static/images/lock.png" mode="aspectFill"></image>
				<view class="to" v-if="cache.lang == 'zh'"
					>声音锁已{{ status ? "开启" : "关闭" }}</view
				>
				<view class="to" v-else>Sound lock is {{ status ? "open" : "close" }}</view>
			</view>
			<view class="list">
				<view class="li flex flex-between align-center">
					<view>
						<view class="t1">{{ $t("lock.login") }}</view>
						<view class="t2">{{ $t("lock.text7") }}</view>
					</view>
					<cl-switch v-model="status"></cl-switch>
				</view>
				<view v-if="status" class="li flex flex-between align-center" @click="reset">
					<view class="t1">{{ $t("lock.text8") }}</view>
					<cl-icon color="#C7C7CC" size="44rpx" name="arrow-right"></cl-icon>
				</view>
				<view v-if="status" class="li flex flex-between align-center" @click="login">
					<view class="t1">{{ $t("lock.btn") }}</view>
					<cl-icon color="#C7C7CC" size="44rpx" name="arrow-right"></cl-icon>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Header from "/@/components/header.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const status = ref(true);
const change = (e: any) => {
	console.log(e);
};

const reset = () => {
	// 重置表单
	uni.reLaunch({
		url: "/pages/user/soundLock/add",
	});
};

const login = () => {
	// 重置表单
	uni.reLaunch({
		url: "/pages/login/login",
	});
};
</script>

<style lang="scss" scoped>
.page-wallet {
	padding-bottom: 30rpx;

	.info {
		.icon {
			display: block;
			width: 200rpx;
			height: 220rpx;
			margin: 170rpx auto 80rpx;
		}
		.to {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 40rpx;
			color: #666666;
			text-align: center;
		}
	}
	.list {
		margin-top: 100rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		.li {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			&:last-child {
				border-bottom: none;
			}
			.t1 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}
			.t2 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 15rpx;
			}
		}
	}
}
</style>
